<template>
    <div>
        <page-main>
            <!-- 批量操作 -->
            <div style="margin-bottom: 20px;">
                <el-button type="primary" size="small" @click="add(null, 'add')">新建</el-button>
            </div>
            <!-- 表格 table -->
            <el-table
                ref="table"
                v-loading="loading"
                :data="dataList"
                border
                stripe
                highlight-current-row row-key="id"
                default-expand-all
                :tree-props="{children: 'child', hasChildren: 'hasChildren'}"
            >
                <el-table-column type="index" width="50" />
                <el-table-column prop="name" label="部门名称" />
                <el-table-column prop="all_name" label="部门全称" />
                <el-table-column prop="type" label="部门类型">
                    <template #default="scope">
                        <span>{{ scope.row.type | typeFilter }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="sort" label="排序" />
                <el-table-column fixed="right" label="操作" width="160">
                    <template #default="scope">
                        <el-button type="text" size="small" @click="add(scope.row, 'edit')">编辑</el-button>
                        <el-button type="text" size="small" @click="del(scope.row.id)">删除</el-button>
                        <el-button type="text" size="small" @click="add(scope.row, 'child')">新增子项</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </page-main>
        <!-- 新增 -->
        <add-dialog ref="reservationAdd" @success="getList" />
    </div>
</template>

<script>
import { departList, delDepart } from '@/api/system'
import AddDialog from './components/AddDialog'
export default {
    name: 'ClueMine',
    components: {
        AddDialog
    },
    filters: {
        typeFilter(val) {
            const map = {
                1: '公司',
                2: '部门',
                3: '小组'
            }
            return map[val]
        }
    },
    data() {
        return {
            loading: false,
            search: {
                pages: 1,
                limit: 10,
                total: 0
            },
            dataList: []
        }
    },
    mounted() {
        this.getList();
    },
    methods: {
        // 新建
        add(item, type) {
            this.$refs.reservationAdd.showDialog(item, type);
        },
        // 修改密码
        statusChange(id) {
            this.$refs.pswSet.showDialog(id);
        },
        // 删除
        del(id) {
            this.$alert('确定将选中该员工？', '提示', {
                confirmButtonText: '确定',
                showCancelButton: true,
                callback: action => {
                    if (action == 'confirm') {
                        delDepart({ id }).then(res => {
                            if (res.status) {
                                this.getList();
                                this.$message({ type: 'success', message: '操作成功！'});
                            }
                        })
                    }
                }
            });
        },
        // 切换分页size
        handleSizeChange(val) {
            this.search.limit = val;
            this.getList();
        },
        // 切换页数
        handleCurrentChange(val) {
            this.search.pages = val;
            this.getList();
        },
        // 重置筛选条件
        handleReset() {
            this.getList();
        },
        // 获取列表
        getList() {
            this.loading = true;
            departList(this.search).then(res => {
                if (res.status == 1) {
                    this.dataList = res.data.list || [];
                }
                this.loading = false;
            })
        }
    }
}
</script>
